nT 


سج ی ا و س سے 2 aa‏ ت 
Ory trial version vw. fOftactory.com id 8#‏ 


بسم الله الرحمن الرحيم | 


الحمد لله رب العالمين والصلاة والسلام على أشرف المرسلين سيدنا محمد 2 
الصادق الأمين أما بعد : ی 
لطالما راودتني فكرة إصدار كتاب الكتروني يحوي المعلومات المختلفة 
التي نتعلمها سواء في الجامعة أو عن طريق الانترنت وإيماناً بأن هذه 
الأمة لن تنهض من جديد ما لم تتخذ دزب العلم سلاحاً لها . أضع بين 
أيديكم هذه المحاولة لوضع كتاب شامل يضم معظم المعلومات اللازمة سے 
لإتقان الدريم ويفر لكن ونظراً لضيق الوقت فقد رأيت أن أخرج هذا ا ت 
على ك فجزاء تفرقة وهذا کو او 7 ل مر الا سک تی ر ے ا 
أتمنق أن استطيع إكمالها وإيصال المعلومة بصورة مبسطه لذا أرجو ممن 
لديه أي ملاحظة ألا يبخل بها علي لكي أتدارك الأخطاء التي قدتكون چ 
موجودة فلا تتكرر في الأجزاء القادمة . 2 
ويأتي هذا الكتاب بعد كتاب سابق عن التحليل والتصميم بإلطريقة الكائنيه 
التوجه وأعتقدآّأن هذا الكتاب أسهل بكثير لان الدروس ١‏ 

يمكن إداكها وتطبيقها بسهولة . 


ئ ل ازفهة a P.‏ < 
و سے ا جکر کے 2 


۹ اي‎ 
٤ ن‎ 
Dr ate with fifFa 


مكونات البرنامج 3 
القوائم 4 
أعدادات اللغة 14 
إنشاء الموقع 17 
إنشاء الصفحة 19 
خصائص الصفحة 20 
الجداول 22 
خصائص الجداول 24 
خلايا الجداول 26 
إدراج جداول جاهزة 28 
إدراج الصور 30 
و 3 
عJa Rollover‏ 36 
تحرير الصور 39 
عمل صور متغيرة 4)10 Navİig‏ 43 
الخرائط الصورية 47 
إدراج النصوص 48 
إنشاء الروابط 49 
المراجع 51 
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مكونات البرنا مج 

تتكون صفحة مءهم؟ )اه۷ من أربعة أجزاء رئيسية هي 
1- أطار المستند 
ويمكن الوصول إليها من خلال القائمة س0لمW‏ وإذا أردنا 
فتح إحدی هذہ اللوحات متلا الخصائص "ع۲٥‏ م٥٣‏ ' قم 
بالنقر عليها من خلال القائمة فتظهر لنا . ويتم تحديد 
خصائص العنصر الذي تم تحديده وقد يكون صورة أو نص 
او غیره . 
3- شریط القو ائم 


4- شريط الحالة 
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File قائم‎ 


وتحتوي على الأوامر المعتادة مثل 


E Ctrl! 
Upef... Ltrl+ll 
Open Recent ۴ . لفتح مدسں د جدید‎ New 2 
. لفتح ملف موجود‎ 0pe1* 
الملفات التي تم فتحھا‎ ٥ pمen‎ Recent* 
Import ۴ . لغلق 1 د لتطبيق الحالي‎ 5 Close* 
Export ۴ 
Lonvert ۴ 1م‎ ۴ e 
. . لغلق جميع التطبيقات‎ 10ء٥‎ A11 
Preview In Browser ۴ 
Check Page ۴ 
. *ع $4۷ لحفظ ملف‎ 
Esil Cirle 


مط للعودة بالصورة إلى آخر نسخة تم 

حفظها عليها . وهي تشبه تماما السمة الموجودة في 

الفوتو شوب" لإعادة الصورة كما كانت عند الفتح أي يزيل 
گان التسر دت على السررة ١‏ 


Design Notes*‏ تقوم بالربط بين الملحوظات الخاصة 
وبين لغة M1‏ 11 وغيرها من الملفات. 


. للخروج من البرنامج بالكامل‎ 8×1) 
oke He He Fe e HE Fe E Fe Fe E Fe Fe e fe e e Fe e fe Fe e e f e 2 f e Fe f e f oF 
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Edi{ قائم‎ 


Undo Insert Ctrl واش ا‎ ٤ کک‎ 
Redo lnzert Ctrl ولحلوي غل الاوامر المعروفة مثل‎ 
۰ ۰ Co 
Paste Ltrl+y HY 
Paste Special... Ltrl+S hifl » 
قص‎ Cut 

Select ږۉAll‎ trl+d, 
Select Parent T ag Ctrl+| لصق‎ Paste 
Select Child Ltrl+] 
Find arıd Replace... Ctrl+F بحث واستبدال‎ Find And Replace 
Find Selection Shift+F 3 
Find Net F3 0 e 

. سنستخدمھا لاحقا‎ Preferences 
Lode Hint Tools ۴٣ 
Repeating Entries ۴ 
Lode Collapse ۴٣ 


Edit with E ternal Editor 


Tag Libraries... 
FReyboard Shortcuts... 
Preferences... Ltrl+ll 


2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2K 
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200m n Ltrl+= 
Zuam Wut Ltrl+- وتحتوي کا بعص سمات التصميم المفيدة‎ 
Magnification ۴ 
مثل الشبكات و المساطر كما تتيح أمكانبة‎ 

Fit All Cirl+Shift+l 3 
Fit idth CtrleAlt+S hift+D 
HTML الا ختیار مابین إظهار حدود جداول‎ 
Design ٩ 

i ode and Design والإطارات والمقاطع او إخفائها‎ 
Switch Yes Ltrl+’ 
Refresh Design Yiem F5 کما تمکذک من ف أهدة مختأی أ خد اأص‎ 
Head Content Ltrl+Shift+H 

س 8 ا أ yı Moscript Content‏ 
ألمستند مثل 1 لتصميم والاکواد وانواع N‏ 
Wizual Aids ۴‏ 
مکونات اأصفحة وادوات دریم ويور المختلفة. ۲ Style Rendering‏ 
Lode Yew Options ۴‏ 
8 ا 8 ne‏ ق ۴ Rulers‏ 
مثل المسطرة أو وضع الشبكة كما تتيح لك ا 
Guides ۴‏ 
المشاهدة الكاملة لأصفحة. ۴ Tracing lImagêë‏ 
Plugins ۴‏ 
Hide Panels F4‏ 
Toolbars ۴‏ 


2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2K 2F 2F 2F 2F 2F 2K 2F 2F 2F 2F 2F 2F 2F 2f 2F 
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Inser( ةمaئlق‎ 


Tag... Ctrl+E أ دا‎ : e 
يمكن أدراج بعض العناصر كالمسطرة الراسية أو ا‎ 
Image Ubjects ۴ ا‎ ۳ 

تطبيق مصغر تم كتابته بلغة الجافا أو تنسيق أو Media ٠‏ 
Table Ltrlrûlt+T‏ 

مف ذا أضاف ‏ كماب کر" خلا هد ۴ Table Objects‏ 
بر م في مل ل ۴ Layout Dbjects‏ 
القائمة إدراج ملفات الفلاش وغيره . ۰ Fam‏ 
Hyperlink.‏ 

Email Link N »* A n“ 

وهي بديلة لشريط الادراج فمن خلالها Named Arıchar Ltrl+Alt+d,‏ 
Date‏ 

له کزلک أد | أأد ب اأحدا | Server-Side Include ۱ Re‏ 
ء راح ر و ول والمؤثرات Lormment‏ 
HTML ۴ i e ee n‏ 

والروابط التشعبية األمختافة وما إلى ذلك. 1 TT‏ 
Recent 5 nippels ۴‏ 


Customize Favorites... 
laet More Ubjectz... 


2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2K 2F 2F 2F 2F 2F 2F 2F 
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Commands قفانم‎ 


تو جد فیها العديد من 1 خړ ارات 1 فر Start Recording Ltrl+S hifl,‏ 
Edit Larmrmnand List...‏ 

E Play ڃ»‎ Start Recording Jia 
Manage Extensions... 

E والتي‎ Recorded Commands 
Llean Up KHTML... 

تستخدم لحفظ سلسلة من الخطوات Clean Up word HTML...‏ 


Add’Remove Netscape Resize Fis... 


كما تمكنك التسجيل وتحرير القائمة 
وتنظيیف وتوم Insert Mark of the Web دادعإوH ML‏ 
ارماك الصور والتحكم في خافية رشكل الجذول, 


Lreake Web Photo Album... 


2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2K 2F 2F 2F 2F 2F 2F 2F 2F 2F 
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Modify قائمة‎ 


PFage Properties... trl 


Selection Properties 


LSS Styles Shift+F1 1 

Edit Tag... تمكنك من تعديل خصائص عناصر‎ 
Huick Tag Editar... Ltrl+T 

اأصفحة ويه کاک با تخد اہ 1 1 تحر یر Make Link Cirle‏ 
الاكواد وتغيير الجداول ومکونات الجداول ۴ Link Target‏ 
Table ۴٣‏ 

وانجاز مختلف الوظائف أمختلف العناصر Image ٣‏ 
Frameset ٣‏ 

ÃArrafgqE ٣  » 
LConyert ٣ الجاهزة.‎ 
Library ۴ 

Templates ۴ 

Timeline ۴٣ 


2K 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2K 2F 2F 2F 2F 2F 2F 2F 2F 2F 
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Text قائمة‎ 


لتنسق اللص باستخدام بعص الخواص مثل lndent Ctrl+Ãlt+] E‏ 


Uutdent Ltrl+rAlt+][ 
Paragraph Format ۴ 


عريض أو مائل وتحديد نمط الخط و غيره . ۴ Alig‏ 
List ۴‏ 
کا کت من اک کے مداة لص وع 


Font ۴٣ 
Style ۴ 
LSS Styles ۴ 
Size ۴٣ 
Size Change ۴ 
Lalor... 


Lheck Spelling ShifteFF 


2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 
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Site قائمة‎ 


ھ کاک من مشاهدة ملفات الموقع Hen Site...‏ 


Manage Sites... 
و فتح وإنشاء المواقع وتحرير الموقع‎ 


Reports... 


Lheck Links Sitewide Ltrl+FB 
Lhange Link Sitewide... 
Advanced ۴ 


2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2 2F 
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Window anil 


. کاک من الدخول ا ا . لوحات 1 . < 


في ار مي 


Ltrl+F a 
Ltrl+F 3 


Shift+F11 
F2 
ShiftrF4 


LtrlrShift+F10 


Ctrl+F10 
Ltrl+F3 
LtrleF r 


F8 
F11 
Shift+F3 


F3 

FF 
ShiftrFT 
ShiftrF 10 
ShiftrF 
F10 
Alt+F3 


F4 


2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2 2F 
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yı lnzerl 
Properties 


LSS Styles 
Layers 
Behaviors 


Uatabazezs 
Bindings 


Serwer Behaviors 


Lomponenks 


Files 
ûssels 
Snippets 


Tag Inspector 
Results 
Reference 
History 

Frames 

Lode Inspector 
Timelines 


Workspace Layout 
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Hide Panels 


Lascade 
Tile Horizontally 
Tile Yertically 


nt tled-1‏ 1پ 


Dreamweaver Help Hel Dp قائمةة‎ 


letting Started with Dreamıweawer 
Ureamweayer Liyel ocs 


ی حال أردت المساعدة أو اأسحث WwWhak's Mew in Dreamweayer‏ 


Using Dreamweaver ۴1‏ 
غ وا 1 2 د د ع“ الي ا Estending Drearmmweayer‏ 
۰ مج Dreamweaver ûP| Reference‏ 


Using ColdFusion Ltrl+F1 


يمكنك إيجادها هنا . Reference Shift+F1‏ 


Dreamweaver Exchange 
Manage E xtersions... 


Dreamweayer Support Center 

Dreamweaver Deyeloper Lenter 

Dreamweayer Documentation Resource Center 
Macromedia Unline Forurns 

Macromedia Trainirg 


Online Registration 
Print Registration 


About Dreamweayer 


2K 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2K 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2 2F 
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اأعدادات اللغة 


اور ال 


* من قائمة ل٤‏ اختر وععمعإعfع۴r‏ أو الاختصار 0ا Ctrl]+‏ 


Preferences 


Lategory Fonts 


eneral س ا‎ 
| Accessibility Eont settings: ã3 
| Code Coloring 
| Zade Format 

Lode Hints 
| Code Rewriting 
| Cop¥[Paste 
| 55 Styles 

File Zompare 
ا‎ ۱ (File Types J Editors 


Fixed Font: | Simplified Arabic Fixed 


هدد ص صصص ڪڪ Highlighting‏ | 

| Invisible Elements Proportional Font: Simplified i اس‎ 

Fı plified Arabic‏ ا 

الإعدادات 

| Mem Document 

| Preview in Browser 

| alidator ع‎ َ i 
الخط‎ 


Layers 
Layout Made 
أ‎ 
Code view: (Tah ee: (pt (Smallest ¥ | ي‎ 
“ite Code view: | Tahara fie: 9p mallest ا‎ 
| Status Bar نا . سك‎ 
وحجمه‎ 


OK | Lanzel Help 
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1 [HTML 
: | hm 


i | XHTML 1.0 Transitional 


ra. 


1! | الحربية‎ (Winda) 
Use when opening existing Files that don't specify an encoding 


| None 


[IInelude Unicode Signature (BON) 


Show Nery Gocument dialog box on Zontrol+R 


OK Lanrzel Help 


Default docurnent 


Default extension 


Default Gacument Type {DTD} 


Default encoding 


Unicode Normalization Erm: 


Preferences 


Lategory 


| seneral 
ûrcrzessibiliky 

Lode Zaloring 
Lode Format 
Lode Hints 

Lode Rewriting 
Lopy|Paste 

55 Styles 

File Zompare 

File Types 1 Editors 
Fonts 
Highlighting 
Invisible Elements 
Layers 


rurmEriE 
Prewiewy in Browser 
Site 
Status Bar 
Yalidator 


إذا لم تجد خيار اللغة العربية ضمن الخيارات السابقة 


اختر ۲٥ط)0‏ . آنا جربت هذه الطر 


م 0 


يهه ونجحت معی 


وإذا لم تنفع معكم فهناك العديد من الطرق الأخرى لحل 


هذه المسالة . 
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۹ 8 


من داخل البرنامج» افتح الملف "باستخدام المفكرة": 
C:/Program Files/Macromedia/Dreamweaver/‏ 
Configuration/Encodings/EncodingMenu.xml‏ 


أو قم بإظهار مصدر الملف w"‏ ع۷1 مل٥٤"‏ بعد أن تنقر 
نقرتين على الملف ثم انقر بزر الماوس الايمن واختر عرض 
المصدر 


<mm:encoding name='"'Other'' charset='""" 
fontgroup='"'Other''filename='""'other.xml''/> 


نهدا النطز 


<mm:encoding name='"'Arabic"" 
charset='' windows- 
1256''fontgroup='"'Other'"" 
filename="'other.xml!''/> 


وقم بإعادة إجراء الخطوات السابقة الموضحة بالصور أعلاه 
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0 


إنشاء الموفع 


- لكي تقوم بإنشاء موقع جديد يجب أن تقوم بإنشاء مجلد في 
محرك الأقراص الصلبة تحفظ فيه جميع صفحات الويب التي 


£ e ee 
. € 


- لكي تقوم بتعريف الموقع باستخدام مربع الحوار ما1 اتبع 
الخطوات التالية 


* من قائمة ع)ا1؟ اختر م)¡؟ سم" وتأکد من اختیار 


. Category gڊرمئll‎ ja Local Info 

* في مربع النص عه" مع)S1‏ اكتب اسم الموقع مثلاً 
عالمالكمبيوتر 

* في المربع [c21 R00٤ ۴٥1de‏ اضغط علی رمز 


انك ر نحت عن الع الى فت بانفاته ف ال 
الأولى ليحوي بداخله موقع الويب . 


17 


PDF created with pdfFactory trial version www.pdffactory.com 


* تأكد من تحدıد‏ llخيlر Refresh Local File List‏ 
Automatically‏ ذإ ار دنا ن يقو م البر نامج بتحدیث القائمة 
الخافة يجس الصفحات الت تى اخشاه إلى المر فة 


بصورة تلقائية . 


* قم بإنشاء مجلد خاص بالصور داخل مجلد الموقع وقم 
باختيارہ من lاlئمرڊg Default image Fo1der‏ . 


* اكتب ال 0۸1ل الخاص بالموقع في المربیع H۲۲۲‏ 
Address‏ 
مث 


WWW.CO-SCI.COM 


* قم بتحديد مربع llحlgر Enable Cache‏ 


* اضغط على )0 لإغلاق مربع الحوار . 
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إنشاء الصفحة 


من قائمة م]Fi‏ اختر New‏ 


Hew Document 


Basic page: Preview: 


HTML 

HTML template 

Library ikem 

#SLT {Entire page) 

#SLT {Fragment} 

ActionScript 4o previBint 
5 

JavaĞrcripk 

AML 


| 1 
Ûynamic page 
Template page 
Dther 
LSS Style Sheets 
Framesets 
Page Designs (Z55) 
Starter Pages 
Page Designs 


SEIS EES 


Description: 
[HTML document 


Document Type [OTD]: 


#HTML 1.0 Transitional ا‎ 


Help PrefErENCES,,, ek more content... Lreate Lanrcel 


يمكن تحديد اللغة المستخدمة في إنشاء الصفحة ثم اضغط 
Create‏ . 


19 


PDF created with pdfFactory trial version www.pdffactory.com 


خصائص الصفحة 


في ال الصفحة اضخغط عاس Properties‏ ستجد زر 
مکتوب عليه ءع)عممهإ۲ معو انقر عليه وستظهر لك 
النافدة التالية 


Eage FropenfiESs 


Lalegory ÃAppearanile 

İl Aûppearanıte 1 کے‎ 

Links Page font: Default Font 

Headings ڪڪ‎ 

Title Encoding Size! | | Pils 


Tracing Image r et 
Text color: E | 
Background colar: 8E 1 1 


Background image: | | 


Repeat: | 0 | 


Left margin: أ ا‎ pixzêls Right margin: ١ | آ2‎ 


Tap margin: | || pixel Bottom margin: | | jixels 


0 


Ny O 
. أنشأته سابقاً‎ 
والحقل )وع م٥8 يمكن من عدم تكرار الصورة أو تكرارها‎ 


وأيضا تحديد نوع التكرار آفقي أو عمودي . 
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في النافذة السابقة يمكن تحديد خصائص الروابط بالضغط 
غل مم1 كما في الصورة التالية 2 


Eaqge FrBpENHIES 


Lategory Links 


Appearance | j EEE 

Link Fant: E {Same as FP as page fon! fant)‏ ا يي ا 

Headings 

TitleEncading Size! ا‎ 

| Tracing Image ی ڪڪ ر‎ 
Link color: Î ا‎ | Rollover links: | 


visited links: El | Active links: Al 


LInderline style: [always underline 


حيث يتم تحديد نوع الخط للرابط وحجمه ولون الرابط النشط 
وأيضا الرابط الذي تمت زيارته . ولتنفيذ الصفحة قم بالضغط 
علی ۳12 أو من قائمة ملف Iخiڙ Preview in Browser‏ 


وحدد المتصفح الموجود لديك وستظهر لك الصفحة بعد 
التنفيذ. 
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الجداول 


من قائمة ۲۲٥و[‏ اختر م[طه٣‏ أومن شريط الإدراج اختار 
Layout‏ وبع ذلك اختر rable‏ كما في الصورة التالية ° 


2 Macromedia Dreamweaver B - [Untitled-1 (XHTML }] 


File Edit Wiew lnset Moadiy Text Commands Site window Help 


j w lngert Common Layout Forms | Text | HTML | Application | Flash elements | Favorites 9 


| standard Exparıded | Layout e 1 EÊ 


٠ 


111 
111 
Hl 


NEES EEL La] Design | Title; (Untitled Document E MM O. CC BE. | 
AE EAE EBE GE 
ِ ا‎ REI] 


S0 100 150 E EET E 350 400 E E E50 E00 E0 700 
bulbul hlnl li lili liiliuiliriliuliri lir liil lili liri liri liriluuurliruiliuruulul 


ا 
E‏ 
ك 
GG‏ 
ا 


[RIT Q [igo ¥lFF1x 193¥ IKI sê 


j e Properties 


Format | None vw | Style | None ا‎ C55 BH J 5 > Link | اٹ ب‎ 


Font | Default Font أ‎ Size | None أ‎ E = = 4 +E Target 
Page Properkties,,, LISE efi: 


jÎ FF Results 
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ستظهر اک الصورة التالية 


Table size 
1 Rous; ES Lolumns: ME 
2Tatle width: a50 | | pixels ا‎ 
Forder thickness: ES pixels 
اا4‎ padding: E EE 
5-2 spacing: E E 


Header 


RHDHE 


Accessibility 
Lapkiaon: 1 


ûliarnı caption: | default 


Summary: ا‎ 


في السطر الأول يتم تحديد عدد الأعمدة والصفوف وفي 
السار اا ب ته عرض اليةر لون افر لفات به 
تحديد سمك حدود الجدول فإذا جعلنا القيمة تساوي صفر يكون 
الجدول بدون حدود وفي السطر الرابع يتم تحديد المساحة بين 

الخلية وإطار الخلية بالبيكسل وفي السطر الخامس يتم تحديد 

المساحة بين الخليتين بالبيكسل . 
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خصائص الجدول 


بعل تحدید الجدول بواسطة الماوس اضخط غا Properties‏ 


i Macromedia Dreamweaver Û - [Untitled-1 KHTML] 


Ele Edit View |nset Modip Text Lommands 


Sie Window Help 
i wT Inset Common Layout Forms | Text | HTML | Application | Flash elements | Favorites 
E 


El | standard Expanded Layout | 1 2 EÊ 


Untitled-17 


Code E La] Design | Title: [untitled Document‏ |2| ا 


Jo ** # ©. | CE. ®. 
SEE 


2body= stable =| 


> 

[R1 Q [100% e 
i w Properties 2 4 2 
| Table Id 3 | ل‎ [as0 | pixels OcalPad s5 8 Align [Default أ‎ EE | None +10 

ols ES Sn EE | pixels piel _ hy CeISpace 50 __ 3|‏ ا1 
لا E E Eg mor [ ll | Erdr color‏ 
ت ia re Î Bg Imagê | gO‏ 
jÎ F Results‏ 


1- اسم الجدول . 2- عدد الصفوف . 3- عدد الأعمدة . 
4- عرض الجدول بالبيكسل أو بالنسبة المئوية. 
- ارتفاع الجدول بالبيكسل أو بالنسبة المئوية. 
6- تحديد المساحة بين الخلية وإطار الخلية بالبيكسل . 
7 تحديد المساحة بين الخليتين بالبيكسل . 
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8- تحديد محاذاة الجدول يمين أو يسار أو بالمنتصف . 
9- حدود الجدول 
كما يمكن تحديد لون الخلفية للجدول ولون الحدود وأيضا 
يمكن عمل صورة كخلفية للجدول من مجلد الصور الذي 
أنشأته سابقا 
وبالنسبة للإشارات الصغيرة * ضع الماوس عليها وتظهر 
وظيفتها كالتالي :- 
Clear Column Widths‏ :- 
يتم إعادة وضع الجدول إلى السابق بإلغاء عرض الخلية . 
-:Convert Table Widths to Pixels‏ 
لجعل مساحة الجدول بالبيكسل 
Convert Table Widths to Percent‏ :- 
بمجرد تكرار النقر سيزداد مساحة بالنسبة المئوية فقط بعرض 
الجدول 
:Clear Row Height‏ - 
لتحديد طول الجدول كما كانت بالسابق 
:Convert Table Height To Pixels‏ 
يقوم بتحويل طول الجدول إلى البيكسل 
:Convert Table Height To Percent‏ 
يقوم بتحويل طول الجدول إلى النسبة المئوية . 
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خلاياالجداول 


i F Propeilles E لمل‎ 
E TT ج‎ 1 2 

Format. Mone ۷ e None Y BIEZEZE lk ۷ ا‎ : 

7 efat Font [ E | ore ۷ Fi | 2 E E Target صو ر ة خلفية الخلية‎ 


3 Calm Harz Defi ا‎ Ma wrap || B1 e TTT 
Hr a METE 1 
Vert Default | Header ¥] Bq إل‎ Bd اا‎ 


لون حدود الخلايا لون خلفية الخليّجيل النص 8014 2 لتحدید وض النص 
داخل الخلية بالمنتصف أو 
يمين أو يسار 

۸1 -ً-تحديد وضع النص 
عمودي أعلى أو أسفل أو 
وسط أو بمحاذاة السطر 


وبمنتصف الخلية 


- خاصية مهس N0‏ عند الكتابة في الخلية يقوم بزيادة 
حجمها تلقائيا لاحتواء النص دون التأثير عليه . 
الرمزين داخل المربع الأحمر في الصورة ضع الماوس 
عليهما وسيظهر التالي 

- Merges Selected Cells Using Spans 
الأول من جهة اليسار وظيفته عند تحديد جميع الخلايا سيتم‎ 
تنشيط الزر وبمجرد الضغط عليه سيقوم بدمج كل الخلايا‎ 
بخلية وأحدة‎ 
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- Splits Cell into rows or columns 
والثاني لتقسيم الخلية التي تم تحديدها وبمجرد الضغط عليها‎ 
ستظهر نافذة بخصائص لأسطر الخلية والأعمدة كما في‎ 
الصورة‎ 


Split Cell 


E 


Lancel 


O Zalurans 


Humber of rows: | 2 | 


أ 


حدد هل تريد تقسيم الخلية إلى صفوف أو أعمدة وعددها من 
تم اضغط 0٥K)‏ 
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إدراج جداول جاهزة 
أخبق خد رل كنا تدا اقا من تم اذهب الى قان 


Command‏ واختر منھا ۴0۲m2 1 ab1e‏ ستظھر الصورة 


Format [ablê 


معان د 
e‏ 
Row colors: First: E #ccss00 | Second: FE] | #ccacon‏ 


Alternate: | Every Gither Ro په‎ | 


کد ڪڪ 
ا Top row: Align: | Hone ww TEx style: | Iralic‏ 
Eg color: E #EsBS0 | Text calor: FE | #ccsa00‏ 


Left col: Align: : | Regular ا اا‎ 


نماذج الجداول 


AlERoms: Bluey ello 


AIEREoms:Earth Colors 

AlERoms:Earth Zolorsa 

AlERomsttareenêY alloy Talal i 1 
ت‎ 


AlERoms: Basic rey 
AlERoms: Drange 


Table: Eorder: [0| 


Apply all attributes to TD tags instead of TR tags‏ ف 


في 1 و 2 يتم تحديد آلوان الجدول فيهما . 

ف القائمة المنسدلة ع)ومإء)[۸ نلاحظ الخيارات التالية 

not Alternate -1‏ 0ل يستخدم اللون الأول لكافة سطور 
الجدول . 
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Every other row -2‏ وفیە یتم وضع الأآلوان سطر بعد 
E‏ 
Every t‌٥w rows -3‏ وفیھ یتم التلوین سطرین بسطرین 
ومثله بقية الاختيارات الأخرى الموجودة . 

1٦٥p R0۷‏ تستخدم الحقول الموجودة فيه لتنسيق الصف 
الأعلى الذي في الجدول ويحتوي على العناوين الرئيسية 
للجدول ومنها يتم تحديد الاتجاه ونوع الخط ولون الخلفية 
ولون النص 

1ه [ef‏ وتستخدم لتنسيق أول عمود من جهة اليسار لتحديد 
الاتجاه وأيضا نوع الخط . كما هو موضح في الشكل السابق 


أما بالنسبة للحقل إملإه8 : م1طه٦‏ فيستخدم لوضع حدود أو 
إطار للجدول ويتم تحديد سمكه من خلال وضع رقم في 


المربع ويزداد سمك الإطار بزيادة الرقم . 


والسطر الأخير يستخدم لإلغاء كود 1۸ وكتابة بدلا عنه 10 


29 


PDF created with pdfFactory trial version www.pdffactory.com 


ادراج صورة 


يمكن إدراج الصور من قائمة )۲٥یہ]‏ نختار eعٍ۾ص!]‏ 
أو باستخدام الاختصار 1 + Alt + Cr]‏ 
أو من شریط الأدوات نختار الأداة 


ii F lhnaet Common Layout | Forms | Text | HTML | Application | Flash elements | Favorites 


R2 3E 8 E; 0-S BQ B-. F 


فيظهر مربع حوار لاختيار الصورة 
Select Image SDUrEE‏ 


Select file name fram: (® File system SEFHE 


O Data sources 
Look in: اب مجلد دید 67| أ‎ 3 EF FF Hr ٠ Image preview 


Ta 
Î Sunset 


eae | 
Files of pe: | Image Files [“giljpg:* jpeg” pna] اد ال‎ 


URL: |file:###ClDocuments and $ ettings/user/Mly Dor) 


Relaliwe to: 8 ocurnent | UIntitled-1 
Lhange default Link Relative Ta in the site definition. 


Document should be sawed to use this option. Previey images 


نقوم بتحديد الصورة من داخل مجلد الصور الذي عملناه 


Relative to ja Document رlتخا‎ jم سابقا وتأکد أيضا‎ 
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وتشغيل الاختيار ومع2ص1 سع ۷م۲۲ لرؤية صورة مصغرة 
للصورة ونضغط 0 . فتظهر الرسالة التالية 


To make a document-relatiye path, your document should‏ ت ا 
be saved firat.‏ 


û file: path will be used until you saye pour document. 


[LJ Dont shaw me this message again. 


ذالم تكن فد أخفت الضررة إلى محا الور الى فى ا 
الموقع .وقد تظهر صورة تطلب نسخ الصورة إلى المسار 
الجديد فنختار نعم 


Macromedia DreamwEeavpPr 


This file is outside of the root folder of site Wnnamed Site 4, 
and may not be accessible when you publish the site. 


“Tour rook folder I3: 


LDocumerts and Setngsuse My Documents", 


Would you like to copy the file there pow? 
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حدد المكان ثم اضغط عa۷$S‏ 


Copy File 4s 


Save in: 6 ا المسنند ات‎ € î E 


I taal O Yîsual Shadin 2005 O) webSited 
lm schanl Î Yîsual Studio 20E (O WwebSites 
I uml Î web 2 الصور‎ 
Û so-sci E webSitel ۴ دږ‎ 


My Received Files [J WebSite الموسیشی عا‎ 
Eî Unnamed Sile ã2 J WwebSite3 موسوغة الدريم وير‎ 


File name: Surzek | 


ثم تظهر الصورة التالية 
Image Tag AccessIBIlty Alirlbules‏ 


Alternate text: Î | vK بدیل يظهر هي حال عدم‎ 
Lang description: | http: 3 


IF ¥ou dont want to enter this information when inserting 
objects, change the Accessibility preferences, 


بعد ذلك تلاحظ إدراج الصورة في مساحة العمل ويفضل 
إضافة عناصر الصفحة بعد تقسيمها إلى خلايا كي يسهل 
التعامل مع مختلف الصور في الموقع 
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i T Piopelles 3 


1 TE 9 
9 MM | Dmentsfaneet pa Û i 


1 ` 90 ANAL 


ج 
E‏ 
La‏ 
rT‏ 
"a‏ 
a‏ 
Err‏ ` 
| 
a:‏ 
CD‏ | 
2 
AS‏ 


Te - 6 ا‎ 
Mp 5 | E z 11 
Rk DOV Hae 1 Lane 96 iy Deal ۷ 


1-نرى نوع الصورة معة"] وحجمها بالكيلوباييت مع 
نموذج مصغر لهذه الصورة . 

2- تستخدم لإدخال اسم للصورة واستخدامه في الجافا 
سكريبت أو لإضافة أوامر التحكم لهذه الصورة . 

3- نرى طول وعرض الصورة بالوحدة الافتراضية للبرنامج 
وهي البيكسل ويمكننا تغيير أبعاد هذه الصورة بإدخال قيم 
جديدة في هذه الخانات وإذا أردنا إدخال القيم باستخدام وحدة 
القياس مليمتر اكتب الرقم الذي تريد متبوعا بالرمز صم وإذا 
أردت إدخال القيم بالسنتيمتر أضف الرمز 0ء وبالبوصة 
أضف الرمزم] وهكذا . 

- ومع ذلك فلا يفضل استخدام هذه الطرق لتعديل الصور بل 
من الأفضل استخدام برنامج الفوتوشوب أو البرامج الأخرى 
المتخصصة بمعالجة الصور- .ويمكننا استعادة القيم الأصلية 
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للصورة بالضغط على الحرف ۷ والحرف 1 لتعود إلى 
حجمها الأصلي . 

4 - يظهر ملف الصورة ومجالها ويمكننا استبدال هذه 
الصورة بصورة أخرى بالضغط على المجلد المجاور لاختيار 
الصورةومن ثم الضغط على )0 . 

5- لعمل رابط بين هذه الصورة وملف آخر أو موقع انترنت 
ا 
الذي نرغب بربطه بهذه الصورة . 

6 کک اا و اشر آل سق رض الف 
المرتبط بهذه الصورة . ويتم تفعيل هذه الخانة بعد عمل )م1 
للصورة . 

7- لاختيار الصورة البديلة التي سوف تظهر عند بداية تحميل 
الصورة بشكل مبدئي حتى يتم تحميل الصورة بالكامل ويمكن 
استخدام نفس الصورة ولكن بجودة اقل أو عدد ألوان اقل من 
الضورة الأسلة. 

8- لمحاذاة النص بالنسبة للصورة إذا وجد معها . 

9- تحتوي على البيانات التي ستظهر في نافذة المتصفح في 
حالة عدم ظهور الصورة لأي سبب . 

0-لعمل إطار حول الصورة وادخل القيمة صفر لإزالة 
الإطار . 
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1- تستخدم لمحاذاة الصورة بالنسبة للموقع الموجودة فيه . 
2- تستخدم لعمل مسافة تحيط بالصورة راسيا وأفقيا . 
ويمكننا تعديل الصورة باستخدام ڊرنalچ Fireworks‏ 
بالضغط على ا841 أو استخدام أي برنامج آخر لمعالجة 
الصور مثل الفوتوشوب . 
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Rollover 


هي صور تتغير بمجرد مرور الماوس عليها ولعمل ذلك 


ضع الماوس في المكان الذي تريد عمل الصورة فيه واختر 


Rol]0ver image‏ کما هو مبین في الشکل 


a Macromedia Dreamweaver  - [Untitled-1 (KHTML }] 
File Edit Yiew lnset Modilp Text Commands Site Window Help 


ii ¥ Inset Common Layout | Forms | Text | HTML | Application | Flash elements | Favorites = 
E E E- 6-A B Q|B- @ 
1 1 


R 3 


ر 


magê 


mage Placeholder — E e 9 
dYer Imag و‎ lf. 2ِ € El, ld, | 
works HTML 


Navigation Bar ٤ 1 ا 0 50 اا‎ 7 E 


E 100 
bubu bulunu 
Craw Rectangle Hotspot 


Dram DYal Hotspot 


GFE WÊ EÊ A 


Draw Polygon Hotspot 


[RI @ [i00 wl? x1?3wl IK F1 sê 


ii w Properties 


Format | None Style | None 5ے | اپ‎ B Z7 Link. ب‎ 


Font Default Font ¥ Size | None ¥ E e Target 


Page Properkties,.., List Items, 


ij F Results 


:.. dream î 0 : 
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يظهر لك المربع الحواري التالي 


Insert Rollover ImaqE 


Browse,‏ ا 
1 
Browse...‏ || 


Prelaad rollover image 


1 
Brose, ,, 


Image name: | 
ûriginal image: 


Rollover image: 


Alternate kext! | 


when clicked, ao to URL: | 


في الحقل عصهم مءعه"] نقوم بكتابة الاسم البرمجي 
للصورة لاستخدامه كمرجع عند كتابة كود جافا سكريبت أو 
في بي سکریبت وغیره . 
في الحقل مهد[ a1,عاإ0‏ نختار الصورة الأولى التي 
ستظهر عند بداية تحميل الصفحة . 
في الحقل عع2ص1 ١ع‏ ۷ه]1هR‏ نختار الصورة البديلة التي 
ستظهر عند وضع المؤشر على الصورة الأولى ويجب أن 
تتساوى أبعاد الصورتين لكي لا يحدث تشوه للصورة التالية . 
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Preload Rollover image رlıتخا‎ ja نتأکد‎ 

کف تل اسر ا ا ل ا ا 
لا يحدث تأخير في ظهورها عند تحريك المؤشر على 
الصورة الأولى . 

When Clicked Go to URL Jll في‎ 

نحدد الملف أو الصفحة التي سيتم فتحها عند الضغط على هذه 
الصورة ومن ثم نضغط المفتاح <0 ويمكن استعراض 
لنتيجة بالضغط على المفتاح ۴12 من لوحة المفاتيح . 
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تحرير الصور 


قم بإدراج صورة كما تعلمنا سابقاً ولاحظ وجود هذه الأدوات في 
اللأسفل عند خصائص الصورة 

w @AKROA 
وعند وضع الماوس على أداة من هده الأدوات يظهر اسمها و سنبداً‎ 
الشرح من أول أداة من جهة اليمين‎ 


حدة الصورة Sharpen‏ : - عامل تصفية لزيادة حدة الأطراف 
کار ا ا م عا ي 
بعد إدراج الصورة قم بالنقر عليه وتظهر الرسالة التالية 


Dreamweaver Û 


The action ¥ou are about to perform will permanently 
alter the selected image, You can unda any changes 
Yol make by selecting Edit = Unda, 


[LJ Gan't show me this message again. 


اضغط O٥)‏ 
بعد ذلك تظهر الصورة التالية 
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Sharpen 


ا 


Prewieipy 


عند تغيير القيم تلاحظ التغير الذي طرا على الصورة وقم بوضع 
القيم التي تناسب تصميمك ويمكنك التراجع كالتالي من قائمة تحرير 


اختر الأمر ململ . 


درجة lلgضzg -:Brightness/Contrast‏ 
حيث يتم تغيير درجة وضوح البيكسلات في الصورة..وهذا يؤثر 
على إضاءة» ظلال ولون الصورة.. وعادة ما تستخدم هذه الأداة 

عا و او د ف ا 


Brightnesz#Contrasl 


Brightness 


n N ee 


1 EYE س‎ 
[#[PrewiEw 


من هنا يمكننا وضع القيم المناسبة للتصميم ويمكننا أيضا التراجع 
عن التعديلات كما سبق . 

ولاحظ إشارة صح داخل المربع تسمح بعمل معاينة للصورة أثناء 
التغيير وإذا قمت بإزالته لن تتمكن من ملاحظة التغيير إلا بعد ضغط 
0 وإغلاق النافذة وهذا ينطبق على جميع النوافذ . 
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إضافة العينlات Resample‏ : - 
ويتم ذلك بتكرار إضافة صف من البيكسلات وأخذ أقرب الألوان بعد 
قيامنا بتغييرات في قياس الصورة( سواء بتكبيرها أو 
تصغير ها..)وهذا يؤثر في درجة وضوح الصورة..ويتم ذلك فقط في 
الصور ذات الامتداد عع مز و fاع‏ واستخدام هذه الأداة يعمل على 
زيادة (عند التكبير) أو تقليل(عند التصغير) في حجم الصورة 

الأصلي. 
وليكون الموضوع أكثر بساطة فلندرج صورة ونكبرها بالسحب من 
الأطراف وبعد ذلك نعمل م[إم_هومR‏ ونلاحظ الفرق 
وكذلك الحال عند تصغير الصورة . ولاحظ أن حجم الملف سوف 
ر ووا ج اف د فی غی ار ی ری ا 
الخصائص. 

القص مp٥إ٤‏ :- 
حيث يتم تصغير مساحة الصورة الأصلية..وذلك بقص الأجزاء 
الغير مهمة منها للتركيز على ما هو مطلوب. 


Ureamwpayper Û 


a The action You are about to perform will permanently 
1 alter the selected image, You can undo any changes 


Yol make by selecting Edit = Unda, 


LJ Gantt show me this message again. 
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بعد ذلك بواسطة الماوس حدد الجزء الذي تريده من الصورة 
واضغط المفتاح إ٥)"ع‏ أو انقر نقرتين داخل المربع ويمكننا التراجع 
۶ العف أظهان واتار قن كل رة اط ولي ايع 
الفارغ في الرسالة ومن ثم 0K‏ . 

* احتفظ بنسخة من الصور لان التعديلات تتم على الملف الأصلي 
للصورة 


* إن أدوات تحرير الصور في دريم ويفر تنطبق فقط على الصور 


1 gif sy jpeg ذات الامتداد‎ 
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عمل صور متغیرة a10‏ وٍNavi‏ 


لعمل صور متغيرة اذهب ت قائمة se‏ واختر Image‏ 
Objects‏ ومنھا Navigation Bar‏ كما في الصورة التالية 


 Moarcrpmeim Drramwe wer, BF - Unite dÎ fF 
J Holy Tm Camrh Sie Wndm Hep 


Facer Snippet 


Cusine Faauites. 
Tel Mose Dbiecin.. 


Tri SE FFE RT 
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أو اختر ۸ہ0صصەC‏ ومنھا Navigation Bar‏ كما في الصورة 
التالية 


F&F Morro me dim DrenmwEe yey Ff ~ [Unie Hl (4F 
ا وا ر اک ر کک ارا‎ 
Frum Cc Lat | : 


a êlE BE @- CECI 


I] Pere Reciangle Hoiapol 
TI bii KH Halipal 
I ai Folgon Hotipt 


[Ri 3 iors iE ETI 


ستظهر لك النافذة التالية 
Insert Navigation Bar‏ 


Na bar elements: 


Element name: 
Up image: Browse... | 
Over image: Browse, ,, 
Down irnage: Browse. 4 
Ower while down image: BrOWSE,,, 


Alternate text: 


when clicked, aa to URL: Browse,,, | in Main wirda په‎ 


Options: [™] Preloar images 


LÎ Show "Down image" initially 


Insert: | Horizontally اا‎ Use tables 
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:Nav Bar Elements -1‏ بإمکانك وضع آکثر من شریط 
باستخدام + للزيادة و- للحذف أما بالأسهم فتمكنك من التنقل بين 
الأشرطة . 

. اسم الشریط‎ :Element Name-2 

. الصورة الأولى التي ستظهر بصفحتك‎ :p ]e-3 
الصورة الثانية ستظهر بمجرد مرور السهم‎ :0 ver ]mage-4 
. على الصورة الأولى‎ 

. س0(: بمجرد النقر عليها ستظهر الصورة الثالثة‎ n ]m2ge-5 
بمجرد مرور السھم علی‎ :0ver While Down Image-6 
. الصورة الثالثة ستظهر الصورة الرابعة‎ 

:A1ternate X7‏ لكتابة نص أو تعليق حول الصورة بمجرد 
مرور السهم عليها سيظهر التعليق . 

When cاicked ,Go to Ur1-8‏ : وهیا لعمل ارتباط تشعیبي 
E o‏ 
Main Window -9‏ ہ1: وهو الذي سيتم فتح فيه المتصفح الجديد . 
:Options -10‏ 

: Preload Image * 

لتحميل الصور كلها عند فتح المتصفح مباشرة حتى يسهل عملية 
مرور . 


Show" Down 1mage "Initially *‏ 
لجعل الصورة الثالثة تظهر بالمقدمة عند فتح الصفحة . 
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۲-1إع1ns:‏ بجانبها قائمة منسدلة لاختيار بين ظهور شريط الصور 
بالشكل العمودي أو الأفقي . 

2- 1ا2 مء 1: لإرفاق الصورة داخل جدول وعند اختيارك لهذا 
الأمر ستلاحظ ظهور خصائص الجدول أسفل البرنامج . 

* عند تطبيق هذا الدرس ستتضح المفاهيم أكثر والموضوع سهل 
جداً المهم أن نعرف متى نستخدم هذه التطبيقات . 
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قم بأدراج صورة كما تعلمنا سابقا بعد ذلك 


2 Macromedia Dreamweaver Û - [Untitled (#HITML}Z] 
File Edit Wiew Site Windom Help 


Inset Ali Test Commands 


i F Ire Commn Layout 2 | Text | HTML | Application | Flash elements | Favorites ج‎ 
& 3 3|E E E 0-3 BD Q|B- @ 
a lImagEê 


Image Placeholder‏ ك 
Rallaver Image‏ 


mh Fireworks HTML 


1 Untied 1 
oe ا‎ 


| E 


Ne Bar سے ت‎ : 
اا اا ا ا و ا ا 0 ھ ای ل‎ 
ل‎ + % 2 
3 لاا‎ Drar 2 ا‎ 
1 ١ ê Dra D¥al Hotspot | 
1 3 ê i Draw Polygon Hotspot 
1 
13 1 
ل‎ 
3 1 E #۴ / 4 
NN ا‎ 
E 
3 
13 ےا‎ 
3 ۴ mowjeldaf a 
EE 
5 
3 
31 
E ا‎ 
1 ا‎ 
و‎ 
ا‎ [RIY Q [i00 vlzrix280wl IK F1 sé 


ii F Properties 


ii F Results 


ii F Timelires 
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اختر الشكل الذي تريد رسمه مربع أو دائري أو شكل حر ثم 
ادال ا ا د ر ق ل ا ق د 
بتحديد الصفحة التي تريد أن يفتحها هذا الرابط من خلال 
مربع الحوار )م1 . 

ومن المربع اععإه٠‏ إذا اخترت )مط يتم فتح الصفحة 
المستدعاة في إطار آخر وبقيت الاختيارات تفتحها في نفس 
الإطار . 

ومؤشر الماوس يستخدم لتحريك الرسم الذي على الصورة . 


ii ¥ Properties 


3 | Hotspot Link [Untitled-4,html 2 
5 د ا‎ © 


Target ا 1 ا‎ Alk | 


Map Map 
md. Ow 


أدراج النصوص 


. ۲×) في أسفل الصفحة أو من خلال قائمة‎ Prope )ies 
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إنشاء الروابط 


اكتب النص الذي ترغب بتحويله إلى رابط ومن ثم قم بتظليله 
من قائمة س0ل م۷1 قم باختيار sع1)]ءمهإ۴‏ من الخصائص 
قم بكتابة م)انهمم يليه البريد الالكتروني في الجزء )م1 كما 
في الصورة 


@ Macromedia Dreamweaver 3 - [Untitled #HIT MIL 2] 
File Edit View |nset Modiyp Test Commands Site Window Help 


| F lreert Common Layout | Forms | Text | HTML | Application | Flash elements | Favorites أ چ‎ 
| RE BE E BE” 0-S SD Q B> € 
ا‎ 


Untitled-1 ° 
| Code E a Design | Title: [untitled Document | e 48 | GG E, lê, | 


| @ R@B®| ¥ ® nn 


[RI Q [1oo #l77ix173v IK 1 se 


Format [Paragraph 5 Style lstvlel - E| ۴4 Link | mailto: E 
Fant | Default Font ا‎ zê | EF ا‎ e | 2 3E Target ا ا‎ 


Page Properkties,.. List Iter, 


ii F Results 
i F Timelines 
:للل :ب :ی‎ 


کما یمکن عمل روابط للانتقال من صفحة إلى اخری في 
الموقع وذلك من خلال تحديد ا لنص أو الصورة التي نريد أن 
تمثل الرابط وبعد ذلك ننقر على المجلد الموجود قرب مربع 
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النص م1[ بعد ذلك حدد الصفحة التي تريد أن ينقلك إليها 
الرابط من مربع الحوار ع۴1 Sect‏ واضغط OK‏ 
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المراجع 


ر کتاب دروس المصمم "الكت السابقة 
الكترونية" 
3- سيديهات تعليمية 


e 
. الخصوص‎ 


Hakrıslamıi @ gmail.com 
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